• 案例定制
  • 模板精选
  • 教学视频
  • 系统学习
  • 设计师
  • 商业服务
  • 问答系统
  • 注册 登录
    教学视频 新手直播 NEW 使用手册
    搜索
    ×
    学习资料
    • 如何设置H5的预加载?
    • 如何理清H5的制作逻辑?
    • iH5 3.0 常见问题
    • 初学者必读:操作指导
    • 快闪H5怎么做?
    • H5在安卓和iOS的差异
    • 做H5,选动画还是视频?
    • 3分钟快速导入PPT教程
    • 给初学者的小重点
    • 如何做好案例优化
    • 案例出错了,怎么测试?
    • 不同类型H5涉及组件
    快闪H5怎么做?

    1.什么是快闪H5?

    大概是在iPhone7发布时出了快闪视频的那段时间,突然兴起了快闪类型的H5。常见的形式是信息的快速轮播夹杂一些图片或者动效。


    2.快闪H5常用动画效果有哪些?

    适用于突出主要的信息的:比如logo,标题之类,以文字为主

    色差:黑底白字 + 白底黑字

    字号:大大大小 + 大大小大

    屏闪:闪白 and 闪黑,适用于突出形容词或者大量同类词语的

    弹幕:叽里呱啦一堆随便出现

    加速:加速闪动,从1秒闪3个逐渐变成1秒7个或者更多

    用于图片素材的:透明 and 半透明、不模糊 and 半模糊

    还有一些类似于打字机效果、位移、XY轴的变换。这一类的最好要做出缓冲效果,像位移,如果从头到尾都是一个速度会感觉很怪异,所以位移的过程中要有缓冲的动作。


    3.做一个快闪H5需要准备哪些素材?

    音乐、文案、图片(可选)

    最完美的是先找好音乐,梳理音乐的结构,最好是有一个基本节奏,中间再穿插一些爆发,或者渐进什么的,有急有缓的音乐,这样就相当于框架有了,再往里面填文案或者配图,也会比较简单一些。

    或者是先做快闪,然后再来配音乐,这样配音乐比较难搭,而且图文配合上没有那么完美,不过比较方便,看着行就行呗。


    4.做快闪H5有几种方案?

    其实快闪的可实现性有很多种,常用的就是视频,用iH5做的话就是时间轴,如果不嫌麻烦的话用动效,或者幻灯片都可以。

    视频的话,AE啊,或者一些视频软件都可以做,好处就是比较容易同步,效果会更炫酷一些,当然成本也会比较高,而且安卓和ios端对于视频的处理也不一样。另外我常用的就是时间轴了,相对而言操作比较简单,而且后期方便改动,不太完美的就是可能音乐和素材的加载速度不同会影响一些效果.。


    5.做一个快闪H5一般需要多久?

    一天左右。



    下面示范用时间轴做一个简单的快闪H5


    进入“我的工作台”,新建手机案例。把舞台按比例缩小到50%。因为快闪是整体效果非常重要的一种案例,所以保持看到整个舞台的状态很重要。

    接下来,动手。

    1491998570501848.png


    1

    先建一个“足够长”的时间轴。至于怎样是足够长呢?算一下你需要多少素材,每个素材出现平均时长基本不超过0.5秒(担心太短的话你可以按1秒算),所以有多少素材你就可以估计整个时间轴有多长。

    01时间轴属性.png


    2

    第二步,我们来添加素材。

    先在工具栏里选中“中文字体”。然后拖到舞台画出中文字体的范围(画多大,放哪里都行,反正可以在属性里再调)。

    在弹出来的输入框里输入文字,顺手的话可以把对象树里的名称也改了,方便辨认。然后设置字体,大小等属性。

    1491998630293760.png

    中文字体属性.png

    接下来可以把调好的这个中文字体复制再粘贴在时间轴下,粘贴多个,然后逐个修改文字和重命名。

    小技巧:修改文字时可以让其他文字都隐藏(不勾选),这样就不会造成视觉上的影响。

    修改文字时.png


    3

    全都是白底黑字就很无聊了,我们来加入一点黑底白字做对比。这时候就要用到透明按钮做背景。

    在工具栏选中透明按钮,到舞台上画出大小和位置。再设置透明按钮的属性如图。

    1491998778460829.png

    再把透明移到对象树对应的位置,然后把想要黑底白字显示的中文字体剪切再粘贴到透明按钮下,成为透明按钮的子对象。记得要把中文字体的颜色改成白色哦。

    加入透明按钮后.png

    文字颜色.png


    4

    好啦,素材部分已经基本了,接下来我们来加动画。

    在第一个中文字体下添加一个轨迹。

    第一条轨迹.png

    轨迹属性修改,记得将“开始显示”和“结束显示”都选为no。然后在大约0.4s的位置添加第一个关键帧。

    1491998861102225.png

    再在约0.8s的位置添加第二个关键帧(时间可以根据各人喜好自行决定)。

    1491998883552464.png

    这时候播放一下你的时间轴,你会发现“小伍”的字样一闪而过。

    没错,接下来又是复制粘贴的事了,把你刚做好的轨迹复制到各个素材下吧(如果是透明按钮就只加到透明按钮下就可以了)。

    1491998981181667.png

    然后把各个素材的关键帧按顺序往后挪,只要保证前一个素材消失后后一个素材才出现就可以了,这时候你的时间轴是这样的。

    1491999014775451.png

    到这里,前半段的动画效果都完成了。


    5

    不过只有这么简单动画怎么能满足你们呢?所以,小伍又加了一个简单的弹幕效果。

    大概就是这样一张简单的图。我们只需要让上面的文字像弹幕一样动起来。

    1491999036460325.png

    怎么做呢?先看对象树。

    1491999100352880.png

    然后全部加轨迹。

    1491999127828350.png

    1491999166331732.png

    可以看出,每句话的轨迹都只有两个关键帧,也就是说,只是从一个状态变到了另一个状态。我们来看其中一句话的属性变化。

    1491999213954268.png

    所以每句话的效果都是在舞台上从左往右的飞过。只是我们要控制让他们的轨迹长度不一样,这样他们飞过的时间和速度都会有差异,就有“弹幕”的感觉啦。


    6

    最后,我们来看时间轴的设置。

    1491999192817819.png

    可以看出,他们是在同一时间开始,只是结束时间不一样。这里的结束时间是小伍随机调的,就不给数据了,你们看着办,调到满意为止吧。

    这里有点要注意的是,透明按钮作为父对象,一旦透明按钮的轨迹结束(不显示),以下子对象的动画会全都不显示,所以无论下面的子对象轨迹时间设置了多长,透明按钮的轨迹长度决定了这段动画的时长。


    到这里,主要的两个部分已经完成啦,更多的细节大家可以按自己喜好去补充哈。

    大家可以扫码看看案例完成之后的效果。

    1491999284275950.png

    更多教程,可以关注公众号查看。

    1491999325559561.gif


    选择文件类型

    手机版

    电脑版

    ×